<template>
    <div>
        <div class="product">
            <div class="product-title">维持竞争力的成本</div>
            <div id="Chart4" :style="{width: '100%', height: '180px'}"></div>

            <div class="collect-group" @click="onClick()">
                <div class="collect-group-label">
                    <p>重资产：</p>
                    <p>维持成本高，风险大</p>
                </div>
                <div class="collect-group-text" @click="show = true">
                    查看5年趋势
                    <div class="triangle"></div>
                </div>
            </div>
        </div>


        <!--弹出开始-->
        <van-popup v-model="show" :style="{ height: '60%',width: '90%' }" closeable round>
            <div class="popup-container">
                <div class="popup-container-title">维持竞争力的成本</div>

                <div class="tag-group">
                    <span class="tag-box-2 tag-1"></span>
                    <div class="tag-group-text">期间费用率/毛利率</div>
                </div>

                <div id="Chart5-popup" :style="{width: '100%', height: '300px'}"></div>
                <div class="popup-container-group">
                    <div v-for="(item,index) in resData" :key="index" :class="item.asset == 1 ? 'cha':'you'">{{ item.asset == 1? '重资产':'轻资产' }}</div>
                </div>
            </div>

        </van-popup>
        <!--弹出结束-->

    </div>
</template>

<script>
    import {powerCost} from "../../api/index";

    export default {
        name: "echart5",
        data() {
            return {
                show: false,
                resData: [],
                yearArr: [],
                ratioArr: []
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            async init() {
                let tscode = this.$route.query.tscode;
                let Chart4 = this.$echarts.init(document.getElementById('Chart4'));
                let color = new this.$echarts.graphic.LinearGradient(
                    1, 0, 0, 1,
                    [
                        {offset: 0, color: '#4765FA'},
                        {offset: 0.4, color: '#14E394'},
                        {offset: 1, color: '#14E394'}
                    ]
                );
                let ratioObj = {};

                await powerCost(tscode).then(res => {
                    this.resData = res;
                    let item = res[res.length - 1];
                    ratioObj = {
                        asset: parseFloat((item.ratio * 100).toFixed(2)),
                        msg: item.asset == 1 ? '重资产' : '轻资产'
                    };

                    let option = {
                        color: color,
                        itemStyle: {
                            color: '#58D9F9',
                            shadowColor: 'rgba(0,138,255,0.45)',
                            shadowBlur: 10,
                            shadowOffsetX: 2,
                            shadowOffsetY: 2
                        },
                        series: [
                            {
                                type: 'gauge',
                                startAngle: 180,
                                endAngle: 0,
                                radius: 130,
                                center: ['50%', '97%'],
                                height: '260px',
                                progress: {
                                    show: true
                                },
                                axisLine: {
                                    show: true,
                                    lineStyle: {
                                        width: 10,
                                        opacity: 1
                                    }
                                },
                                axisTick: {  //刻度线
                                    show: true,
                                    lineStyle: {
                                        color: '#D8D8D8'
                                    }
                                    /* length: 20,
                                     splitNumber: 2,
                                     lineStyle: {
                                         color: [[0.25, '#FF6E76'], [0.5, '#FDDD60'], [0.75, '#58D9F9'], [1, '#7CFFB2']],
                                         width: 5
                                     }*/
                                },
                                axisLabel: {
                                    distance: -38,
                                    show: false
                                },
                                splitLine: { // 分隔线
                                    show: true,
                                    lineStyle: {
                                        width: 2,
                                        color: '#D8D8D8'
                                    }
                                    /*length: 20,
                                    splitNumber: 2,
                                    lineStyle: {
                                        color: '#D8D8D8',
                                        width: 5
                                    }*/
                                },
                                pointer: { //指针
                                    show: true,
                                    icon: 'path://M65.582671 288.791335l446.417329 446.41733 446.417329-446.41733z',
                                    length: '8%',
                                    width: 8,
                                    height: 10,
                                    offsetCenter: [0, '-103%'],
                                    itemStyle: {
                                        color: '#25B8B7'
                                    }
                                },
                                title: {
                                    fontSize: 18,
                                    offsetCenter: [0, '-50%']
                                },
                                detail: {
                                    offsetCenter: [0, '-20'],
                                    valueAnimation: true,
                                    formatter: function (value) {
                                        return '{value|' + value.toFixed(0) + '}{unit|%}';
                                    },
                                    rich: {
                                        value: {
                                            fontSize: 50,
                                            fontWeight: 'bolder',
                                            color: '#333333'
                                        },
                                        unit: {
                                            fontSize: 18,
                                            color: '#333333',
                                            padding: [0, 0, -12, 0]
                                        }
                                    }
                                },
                                data: [
                                    {
                                        name: ratioObj.msg,
                                        value: ratioObj.asset,
                                    }
                                ]
                            }
                        ]
                    };
                    Chart4.setOption(option);


                    let yearArr = [];
                    let ratioArr = [];

                    res.forEach(item => {
                        yearArr.push(item.year);
                        ratioArr.push(parseFloat((item.ratio * 100).toFixed(2)));
                    });
                    this.yearArr = yearArr;
                    this.ratioArr = ratioArr;

                })
            },
            onClick() {
                this.show = true;

                let option = {
                        color: '#6467F0',
                        grid: {
                            y: '32'
                        },
                        xAxis: {
                            type: 'category',
                            data:
                            this.yearArr
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                    formatter: '{value}%'
                            },
                            axisLine:{
                                lineStyle: {
                                    color: '#999999'
                                }
                            }
                        },
                        series: [
                            {
                                name: '期间费用率/毛利率',
                                data: this.ratioArr,
                                type: 'line',
                                itemStyle: {
                                    color: '#6467F0'
                                },
                                lineStyle: {
                                    normal: {
                                        color: '#6467F0'
                                    }
                                },
                                areaStyle: {
                                    color: '#6467F0',
                                    opacity: 0.1
                                }
                            }
                        ]
                    }
                ;

                this.$nextTick(() => {
                    let Chart = this.$echarts.init(document.getElementById('Chart5-popup'));
                    Chart.setOption(option);
                });
            }
        }
    }
</script>

<style scoped lang="less">
    .popup-container {
        width: calc(100% - 24px);
        overflow-x: hidden;
        padding: 20px 12px 0 12px;
        text-align: left;

        .popup-container-title {
            font-size: 18px;
            padding-bottom: 28px;
        }

        .popup-container-group {
            width: 80%;
            position: relative;
            top: -42px;
            left: 32px;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            justify-items: center;
            font-size: 13px;
            color: #333333;
            text-align: center;
        }
    }
</style>
